<template>
  <div class="box">
    <img class="top-icon" src="../assets/images/top-icon.png" alt="" srcset="">
    <div class="title">号码库更新明细</div>
    <img class="slIcon" src="../assets/images/slIcon.png" alt="" srcset="">
    <img class="srIcon" src="../assets/images/srIcon.png" alt="" srcset="">
    <div style="height: 185px;margin: 30px auto">
      <dv-scroll-board :config="config" style="width:700px;height:170px;margin-left: 20px"/>
    </div>
    <img class="left-icon" src="../assets/images/left-icon.png" alt="" srcset="">
    <img class="right-icon" src="../assets/images/right-icon.png" alt="" srcset="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: []
    }
  },
  mounted() {
    this.config = {
      data: [
        ['132 **** 2222', '2024-11-26 23:23:12'],
        ['132 **** 2222', '2024-11-26 23:23:12'],
        ['132 **** 2222', '2024-11-26 23:23:12'],
        ['132 **** 2222', '2024-11-26 23:23:12'],
        ['132 **** 2222', '2024-11-26 23:23:12'],
        ['132 **** 2222', '2024-11-26 23:23:12'],
        ['132 **** 2222', '2024-11-26 23:23:12'],
      ],
      oddRowBGC: 'rgba(255, 255, 255, 0)',
      evenRowBGC: 'rgba(255, 255, 255, 0)',
      align: 'center'
    }
  }
}
</script>

<style scoped lang="scss">
.dv-scroll-board-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 300px; /* 容器高度 */
}

.box {
  width: 100%;
  height: calc((100% - 30px) / 3);
  background-image: url("../assets/images/box3.png");
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  right: 0;
  padding-top: 25px;

  .top-icon {
    width: 160px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 95px;
  }

  .title {
    display: flex;
    font-size: 18px;
    color: #23CEFD;
    margin-left: 30px;
  }

  .left-icon {
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .right-icon {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .srIcon, .slIcon {
    width: 8px;
    height: 8px;
    position: absolute;
    margin-top: 20px;
    top: 45px;
  }

  .srIcon {
    right: 20px;
  }

  .slIcon {
    left: 20px;
  }
}

.row-item:last-child{
  text-align: right!important;
}
</style>
